<template>
  <div class="divContaint">
    <div class="divhead">边城监狱智慧总仓库管终端-{{titleName}}入库</div>
    <div class="divbody">
      <div>
        <div class="divbodytitle">厂家列表：</div>
        <div class="divbodyleft">
          <div class="divleftcontent" v-for=" (item,index) in customerList" v-bind:key="index">
            <div
              v-bind:class="'divleftcontent' + (active == index ? '1' : '3')"
              @click="getOrderList(item.FlnkID,item.CustomerName,index)"
            >
              <div class="divtext">{{item.CustomerName}}</div>
              <!-- <div>{{item.CustomerCode}} {{item.Contacts}}</div> -->
            </div>
            <div :class="'divleftcontent' + (active==index ? '2' : '4')"></div>
          </div>
        </div>
      </div>
      <div style="width:100%">
        <div class="divbodytitle">当前厂家：{{curCustomerName}}</div>
        <div class="divbodyright">
          <div
            class="divrightcontent"
            :class="'divrightcontent' + (active1 == index ? 'ed' : '')"
            v-for=" (item,index) in orderList"
            v-bind:key="index"
            @click="getOrderData(item,index)"
          >
            <table width="100%;">
              <col width="20%" />
              <col width="30%" />
              <col width="20%" />
              <col width="30%" />
              <tr>
                <td style="text-align:right;">订单：</td>
                <td style="text-align:left;">{{item.POCode}}</td>
                <td style="text-align:right;">款式：</td>
                <td style="text-align:left;">{{item.StyleName}}</td>
              </tr>
              <tr>
                <td style="text-align:right;">总数：</td>
                <td style="text-align:left;">{{item.TotalCount}}</td>
                <td style="text-align:right;">金额(元)：</td>
                <td style="text-align:left;">{{item.TotalPriceTax}}</td>
              </tr>
              <tr>
                <td style="text-align:right;">签订期：</td>
                <td style="text-align:left;">{{$moment(item.PODate).format('YYYY-MM-DD')}}</td>
                <td style="text-align:right;">交货期：</td>
                <td style="text-align:left;">{{$moment(item.POEndDate).format('YYYY-MM-DD')}}</td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>
    <div class="divfoot">
      <div class="divbutton" v-on:click="winClose()">
        <a class="el-icon-close" style="color:#e6a23c"></a>&nbsp;关闭
      </div>
      <!-- <div class="divbutton" v-on:click="winCommitData()">
        <a class="el-icon-check" style="color:#e6a23c"></a>&nbsp;确定
      </div> -->
    </div>
  </div>
</template>
<script>
import Mixin from '../mixin'
import {getCustomerList, getOrderList} from '@/api/common'
export default {
  name: 'fzml',
  props: ['instoreType', 'instoreurl'],
  data () {
    return {
      curCustomerName: '',
      customerList: [],
      orderList: [],
      orderItem: {},
      active: -1,
      active1: -1,
      titleName: ''
    }
  },
  mounted: function () {
    // 客户列表
    let vm = this
    vm.titleName = vm.codeFormat(vm.instoreType)
    vm.getCustomerList()
  },
  computed: {},
  mixins: [Mixin], // demo.vue 中声明minix 进行混合
  methods: {
    getCustomerList: function () {
      let vm = this
      let params = new FormData()
      params.append('Spell', '')
      params.append('BusinessScope', vm.instoreType)
      getCustomerList(params).then((_data) => {
        if (_data.data != null && _data.data.result === 1) {
          vm.customerList = _data.data.data
        } else {
          vm.customerList = []
        }
      }
      )
    },
    getOrderList: function (_customerFlnkID, _customerName, _index) {
      let vm = this
      vm.active = _index
      vm.curCustomerName = _customerName
      let params = new FormData()
      params.append('CustomerFlnkID', _customerFlnkID)
      params.append('POCode', '')
      getOrderList(params).then((_data) => {
        if (_data.data != null && _data.data.result === 1) {
          vm.orderList = _data.data.data
          // vm.getOrderData(_data.data.data[0], 0)
        } else {
          vm.orderList = []
          vm.active1 = -1
        }
      }
      )
    },
    getOrderData: function (_orderItem, _index) {
      try {
        let vm = this
        vm.active1 = _index
        if (_orderItem != null) {
          vm.orderItem = _orderItem
          vm.winCommitData()
        }
      } catch (e) {
        alert(e)
      }
    },
    winCommitData: function () {
      let vm = this
      if (vm.active1 === -1) {
        vm.$message('请选择厂家订单')
        return
      }
      vm.$.extend(vm.orderItem, { instoreType: vm.instoreType })
      vm.$store.commit('setOrderItem', vm.orderItem)
      this.$parent.getWindowClose()
      vm.$router.push({ path: vm.instoreurl, query: {type: vm.instoreType} })
    },
    winClose: function () {
      this.$parent.getWindowClose()
    }
  }
}
</script>
<style scoped lang="scss">
.divContaint {
  display: flex;
  flex-direction: column;
  height: 100%;
  .divhead {
    height: 80px;
    font-size: 25pt;
    text-align: left;
  }
  .divbody {
    flex: 1;
    display: flex;
    flex-direction: row;
    .divbodytitle {
      text-align: left;
      font-size: 16pt;
      margin: 5px 0px;
      font-weight: bold;
      margin: 20px 0px;
    }
    .divbodyleft {
      width: 500px;
      overflow-x: hidden;
      overflow-y: auto;
      height: 900px;
      .divleftcontent {
        width: 100%;
        height: 1.6rem;
        line-height: 1.6rem;
        margin-bottom: 10px;
        display: flex;
        flex-direction: row;
        .divtext {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          width: 400px;
          height: 100%;
          margin: 0 auto;
          margin-top: 13px;
        }
        .divleftcontent1 {
          flex: 1;
          background-color: #35577b;
          box-shadow: 0px 0px 20p gray;
          font-size: 25pt;
          cursor: pointer;
        }
        .divleftcontent1 > div:nth-child(1) {
          font-size: 20pt;
          height: 80px;
          line-height: 80px;
        }
        .divleftcontent1 > div:nth-child(2) {
          font-size: 15pt;
        }
        .divleftcontent2 {
          width: 0;
          height: 0;
          border-top: 0.8rem solid transparent;
          border-left: 50px solid #35577b;
          border-bottom: 0.8rem solid transparent;
          cursor: pointer;
        }
        .divleftcontent3 {
          flex: 1;
          background-color: #409eff;
          box-shadow: 0px 0px 10px gray;
          cursor: pointer;
        }
        .divleftcontent4 {
          width: 48px;
        }
        .divleftcontent3 > div:nth-child(1) {
          font-size: 20pt;
          height: 80px;
          line-height: 80px;
        }
        .divleftcontent3 > div:nth-child(2) {
          font-size: 15pt;
        }
      }
    }
    .divbodyright {
      flex: 1;
      margin-right: 10px;
      margin-left: 10px;
      overflow-x: hidden;
      overflow-y: auto;
      height: 900px;
      .divrightcontent {
        width: 100%;
        background-color: #409eff;
        box-shadow: 0px 0px 10px gray;
        font-size: 16pt;
        margin: 0px 10px 10px 10px;
        cursor: pointer;
      }
      .divrightcontented {
        background-color: #35577b;
        box-shadow: 0px 0px 10px gray;
        font-size: 16pt;
        margin: 0px 10px 10px 10px;
        cursor: pointer;
        background: -moz-linear-gradient(top, #5b80a5 0%, #404c3a 100%);
        background: -webkit-gradient(
          linear,
          left top,
          left bottom,
          color-stop(0%, #5b80a5),
          color-stop(100%, #404c3a)
        );
        background: -webkit-linear-gradient(top, #5b80a5 0%, #35577b 100%);
        background: -o-linear-gradient(top, #5b80a5 0%, #35577b 100%);
        background: -ms-linear-gradient(top, #5b80a5 0%, #35577b 100%);
        background: linear-gradient(to bottom, #5b80a5 0%, #35577b 100%);
      }
    }
  }
  .divfoot {
    height: 90px;
    width: 350px;
    display: flex;
    flex-direction: row;
    margin: 0 auto;
    .divbutton {
      background-color: #1661af;
      color: white;
      font-weight: bold;
      width: 160px;
      height: 75px;
      font-size: 22pt;
      border-style: none;
      border-radius: 8px 8px 8px 8px;
      line-height: 75px;
      vertical-align: middle;
      margin: 10px auto;
      cursor: pointer;
    }
  }
}
</style>